<!--  -->
<template>
  <div class="home-nav">
    <nav-bar bgcolor="#666">
      <div slot="left"><icon icon="#icon-gengduo"></icon></div>
      <div slot="center" class="search">
          <icon icon="#icon-sousuo" class="sousuo"/>
          <span class="text">{{search[num]}}</span>
      </div>
      <div slot="right"><icon icon="#icon-audio-fill"></icon></div>
    </nav-bar>
  </div>
</template>

<script>
import Icon from '@/components/content/icon/Icon.vue'
import NavBar from '@/components/common/navBar/NavBar.vue'
import{ getSearchHot} from '@/network/search.js'
export default {
  name: 'HomeNavBar',
  data() {
    return {
      search: [],
      num: 0,
    }
  },
  components: {
    NavBar,
    Icon
  },
  created() {
    this.getSearchHot()
    this.setNum()
  },
  methods: {
    setNum() {
      setInterval(() => {
        console.log(Math.floor(Math.random() * this.search.length));
        this.num = Math.floor(Math.random() * this.search.length) 
      }, 5000);
    },
    getSearchHot() {
      getSearchHot().then((res) => {
        for(let i of res.data) {
          this.search.push(i.searchWord)
        }
      }) 
    },
    
  }
}

</script>
<style lang="scss" scoped>
.search {
  position: relative;
  width: 100%;
  height: 24px;
  margin-top: 10px;
  border-radius: 12px;
  background-color: $color-dialog-background;
  color: #7c7c7c;
}
.sousuo {
  position: absolute;
  top: -9px;
  left: 10px;
}
.text {
  position: absolute;
  top: -9px;
  left: 30px;
  font-size: $font-size-small;
}
</style>